﻿<template>
	<div class="contener"
	>
		<div class="top" style="display: flex; justify-content:flex-end ; margin: 10px 2px 15px 0px; color: beige;"><i class="el-icon-location-outline" style="margin-right: 5px;" />{{ text }}</div>
	<div class="block">
			<!-- <span >Intensity</span>
			<el-slider v-model="value1"
			:min="0"
			:max="150"
			:show-tooltip="false"
			show-input
			:step="0.01"
			@input="change1()"
			></el-slider>
			
			
			  <span class="demonstration">Zenith Color</span>
			  <el-color-picker
			  v-model="color"
			  show-alpha
			  :active-change="index()"
			  :change="change()"
			 
			  :predefine="predefineColors">
			 </el-color-picker> -->
			 
			 <el-collapse v-model="activeNames" @change="Switchfold()">
			   <el-collapse-item title="强度:Intensity" name="1">
			     <el-slider v-model="value1"
			     :min="0"
			     :max="150"
			     :show-tooltip="false"
			     show-input
			     :step="0.01"
			     @input="change1()"
			     ></el-slider>
			   </el-collapse-item>
			   <el-collapse-item title=" 顶点颜色:Zenith Color" name="2">
			     <el-color-picker
			      v-model="color"
			      show-alpha
			      @active-change="Color=>index(Color, 1)"
			      @change="Color=>change(Color, 1)"
			     
			      :predefine="predefineColors">
			     </el-color-picker>
			   </el-collapse-item>
			  
			 </el-collapse>
			<button @click="testtwo()">测试二机</button>
	</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				 activeNames: [],
				loading: true,
				value1:0.1,
				text:'',
				ObjectPath:'',
				
				color:'',
				predefineColors: [
				  '#ff4500',
				  '#ff8c00',
				  '#ffd700',
				  '#90ee90',
				  '#00ced1',
				  '#1e90ff',
				  '#c71585',
				  'rgba(255, 69, 0, 0.68)',
				  'rgb(255, 120, 0)',
				  'hsv(51, 100, 98)',
				  'hsva(120, 40, 94, 0.5)',
				  'hsl(181, 100%, 37%)',
				  'hsla(209, 100%, 56%, 0.73)',
				  '#c7158577'
				],
				LightColor:{R:'',
					G:'',
					B:'',
					A:''},
				// window:window.location.href,
				upcolor:'',
				testtwo1:false
				
			}
		},
		watch:{
			$route(){
				if(this.$route.query.name){
					this.getDataList()
					this.GetLightSource()
					this.activeNames=[]
					
				}
			}
				
			
		},
		mounted(){
			this.getDataList()
			this.GetLightSource()
			
		},
		methods:{
			testtwo(){
				this.testtwo1=true
			},
			Switchfold(){
				if(this.activeNames != ''){
					this.upcolor=this.color
				}
				
			},
			change(Color){
				console.log(Color)
				// var c = this.color;
				// if(c !=null){
				// 	var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g,'').split(',');
				// this.LightColor.R=parseInt(rgb[0]) ;
				// this.LightColor.G=parseInt(rgb[1]) ;
				// this.LightColor.B=parseInt(rgb[2]) ;
				// this.LightColor.A=parseInt(rgb[3]) ;
				// }else{
				// 	this.LightColor.R=1 ;
				// 	this.LightColor.G=1 ;
				// 	this.LightColor.B=1 ;
				// 	this.LightColor.A=1 ;
				// 	console.log("4444",this.LightColor)
				// }
				if( Color == null){
					this.axios.put('/remote/object/property',
				{
						"objectPath" :'/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
							"access" :"WRITE_TRANSACTION_ACCESS",
							"propertyName" :"LightColor",
							"propertyValue" :{
								 "LightColor": {
										R: 1,
										G: 1,
										B: 1,
										A: 1
									}
					}
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				
				
				).then(res =>{
							
							console.log("3333",this.LightColor)
				})
				}
				
			
			},
			index(color,n){
				// console.log("?????????",color)
				if(color != ''){
					var c = color;
					if(c !=null){
						var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g,'').split(',');
					this.LightColor.R=parseInt(rgb[0]) ;
					this.LightColor.G=parseInt(rgb[1]) ;
					this.LightColor.B=parseInt(rgb[2]) ;
					this.LightColor.A=parseInt(rgb[3]) ;
					}else{
						this.LightColor.R=1 ;
						this.LightColor.G=1 ;
						this.LightColor.B=1 ;
						this.LightColor.A=1 ;
						console.log("4444",this.LightColor)
					}
				}else{
					console.log("????")
				}
				
					// console.log("2222" , this.LightColor)
					if( this.activeNames.length > 0){
						if(this.testtwo1 == true){
							console.log("二运行了")
							this.axios.put('/remote2/object/property',
							{
									"objectPath" :"/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0",
										"access" :"WRITE_TRANSACTION_ACCESS",
										"propertyName" :"LightColor",
										"propertyValue" :{
											 "LightColor": {
													R: 1,
													G: 1,
													B: 1,
													A: 1
												}
								}
							},
							{
								headers:{
									'Content-Type': 'application/json'
								}
							}
							
							
							).then(res =>{
										
										console.log("111111",this.LightColor)
							})
						}
						this.axios.put('/remote/object/property',
					{
							"objectPath" :'/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
								"access" :"WRITE_TRANSACTION_ACCESS",
								"propertyName" :"LightColor",
								"propertyValue" :{
									 "LightColor": {
											R: this.LightColor.R,
											G: this.LightColor.G,
											B: this.LightColor.B,
											A: this.LightColor.A
										}
						}
					},
					{
						headers:{
							'Content-Type': 'application/json'
						}
					}
					
					
					).then(res =>{
								console.log(this.testtwo1)
								console.log("3333",this.LightColor)
					})
					
					
					
					}
					
					
					
					
					
				},
			
			change1(){
				if(this.value1 != 0.1){
					this.axios.put('/remote/object/property',
				{
						"objectPath" :'/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
							"access" :"WRITE_TRANSACTION_ACCESS",
							"propertyName" :"Intensity",
							"propertyValue" :{
								 "Intensity": this.value1
					}
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				
				
				).then((res) =>{
								
				},
				(err)=>{
					
				}
				
				
				)
				}
				
				
				

				
				
			},
			
			getDataList(){
				this.text =this.$route.query.name
			},
			GetLightSource(){
				
				
				// this.text=this.$route.query.name
				this.changeData()
				
				this.axios.put('/remote/object/property',
				{
					"ObjectPath":'/Game/Maps/UEDPIE_0_LaserStage.LaserStage:PersistentLevel.DirectionalLight_1.LightComponent0',
					"Access":"READ_ACCESS" ,
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				).then(res =>{
				
					let ceshi=[]
					ceshi[0] =  Math.round(res.data.LightColor.R)
					ceshi[1] =  Math.round(res.data.LightColor.G)
					ceshi[2] =  Math.round(res.data.LightColor.B)
					ceshi[3] =  1
					 
					let zcolor ="rgba("+ceshi.toString()+")"
					this.color=zcolor;
					
				
					this.value1=res.data.Intensity
					this.loading=false
				})
			}
		}
	}
	
	
	
</script>

<style >
	.demonstration{
		width: 100%;
		
	}
	.el-color-picker{
		width: 100%;
		margin-top: 10px;
	}
	.el-color-picker__trigger{
		width: 100%;
		height: 30px;
	}
	.block{
		width: 95%;
	}
	.el-collapse-item__header{
		background-color: #333A46;
		border-bottom: #333A46;
		color: #FFFFFF;
		text-align: center;
	}
	.el-collapse-item__content{
		background-color: #333A46;
		margin-left: 10px;
	}
	.el-collapse-item__wrap{
		background-color: #333A46;
	}
	
</style>
